<template>
  <view>
    <view class="login">
      <uni-icons type="contact-filled" color="gray" size="100"></uni-icons>
      <button class="login-btn" @click="logonText">一键登录</button>
      <view class="login-text">
        登录后尽享更多权益 
      </view>
    </view>
  </view>
</template>

<script>
  import { mapMutations,mapState } from 'vuex'
  export default {
    name:"my-login",
    data() {
      return {
        
      };
    },
    computed:{
      // 获取Vuex用户信息
      ...mapState('m_user',['userInfo']),
      // 获取是否是购物车跳转过来的
      ...mapState('m_user',['reirectInfo'])
    },
    methods:{
      // 调用Vuex中储存用户信息方法
      ...mapMutations('m_user',['undateToken','updateRedirectInfo','undateUserInfo']),
    async  logonText(){
        // 今年4月13日 getUserInfo方法只能获取到匿名用户信息 已经不好用了
        // uni.getUserProfile 获取到用户的真实信息
        // 1. 获取用户信息
        // 小程序登录
        const [err,succ] = await uni.getUserProfile({
          // 必填项 获取信息的用途(自定义)
          desc:'登录'
        })
        // app登录
        // const [err,succ] = await uni.getUserInfo()
        // 2.判断用户是否授权
        if(err) return uni.$showMsg('您取消了授权')
        // 3. 通过Vuex保存授权信息
        this.undateUserInfo(succ)
        // 4. 调用uni.login()接口登录页必备code参数 实现登录
        const [err1,loginsucc] = await uni.login()
        if(err1) return uni.$showMsg('登录失败')
        // 5. 准备登录数据 上传到后端
        const params = {
          code: loginsucc.code,
          encryptedData: succ.encryptedData,
          iv: succ.iv,
          rawData: succ.rawData,
          signature: succ.signature
        }
        // 6.发送请求获取用户登录后的token
        // 注意: 发送请求获取token 开发时候必须添加到公司开发者中 用公司appid才能成功
        const {data: {message,meta}} = await uni.$http.post('/api/public/v1/users/wxlogin', params)
        console.log(message,meta)
        // 7. 获取用的token 储存到Vuex中
        // 判断是否登录成功
        if(meta.status !== 200) return uni.$showMsg('您的appid暂不是公司id')
        // 在Vuex中储存token
        this.undateToken(message.token)
        // 判断是否是来自购物车的登录请求
        if(this.reirectInfo !== null){
          // 判断类型是否是购物车请求
           // 如果是tabBar跳转
          if(this.reirectInfo.type === 'switchTab'){
            uni.switchTab({
              // 跳转到购物车
              url:this.reirectInfo.from,
              // 跳转成功后 重置跳转状态位
              success: () => {
                this.updateRedirectInfo(null)
              }
            })
          }else{
            // 如果不是tabBar跳转
            uni.navigateTo({
              // 跳转到购物车
              url:this.reirectInfo.from,
              // 跳转成功后 重置跳转状态位
              success: () => {
                this.updateRedirectInfo(null)
              }
            })
          }
        }
      }
    }
  }
</script>

<style lang="scss">
.login{
  height:100vh;
  background-color: #F8F8F8;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
      .login-btn{
        width: 90%;
        background-color: #c00000;
        color: #fff;
        border-radius: 50px;
        margin: 20px 0;
      }
      .login-text{
        font-size: 12px;
        color: gray;
      }
}
</style>
